<html>
  <head>
    <title>Doom Fire Effect</title>
    <link rel="stylesheet" type="text/css" href="./css/main.css">
  </head>
  <body>
    <center>
      <h1>Doom Fire Effect</h1>
      <h2><span id="engine-info"></span> using <span id="render-info"></span></h2>
      <a href="https://github.com/filipedeschamps/doom-fire-algorithm">https://github.com/filipedeschamps/doom-fire-algorithm</a>
      <div id="fireCanvas"></div>
      <div class="margin">
        <button id="decreaseFireSource">-</button>
        <button id="destroyFireSource">Min Fire</button>
        <button id="createFireSource">Max Fire</button>
        <button id="increaseFireSource">+</button>
      </div>
      <section class="margin">
        <h1>Renderers</h1>
        <button id="toggleDebugMode">Table Debug</button>
        <button id="toggleTableRender">Table</button>
        <button id="toggleCanvasRender">Canvas</button>
        <button id="togglePixi">Pixi</button>
      </section>
      <section class="margin">
        <h1>Engines</h1>
        <button id="toggleJSRender">JS</button>
        <button id="toggleRustRender">Rust</button>
        <button id="toggleElmRender" disabled>Elm</button>
      </section>
    </center>

    <script src="./main.js"></script>

  </body>
</html>

